<template>
  <div class="card-item" :style="{ minWidth: width }">
    <el-card :body-style="{ padding: '0px' }" class="model_right">
      <div class="model_right" :style="'height:' + offsetHeight + 'px'">
        <img
          v-if="index % 3 == 0"
          class="icon_img_right"
          src="../../assets/img/icon5.png"
        />
        <img
          v-if="index % 3 == 1"
          class="icon_img_right"
          src="../../assets/img/icon6.png"
        />
        <img
          v-if="index % 3 == 2"
          class="icon_img_right"
          src="../../assets/img/icon7.png"
        />
        <div class="name">{{ item.name }}</div>
        <div>{{ item.value.toFixed(0) }}亩</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "60%",
    },
    offsetHeight: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 0,
    },
    item: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      currentDate: new Date(),
    };
  },
};
</script>

<style lang="less" scoped>
.el-card {
  border: 0;
  height: 100%;
}
.card-item {
  padding: 0 10px;
  box-sizing: border-box;
  height: 100%;
}

// /* 大屏幕 ：大于等于1500px*/
@media (min-width: 1800px) {
  .image {
    width: 60px;
    height: 60px;
    display: block;
    padding-top: 10px;
  }
}
@media (min-width: 1500px) and (max-width: 1799px) {
  .image {
    width: 60px;
    height: 60px;
    display: block;
    padding-top: 10px;
  }
}
/*默认*/
/*默认*/
@media (min-width: 1200px) and (max-width: 1499px) {
  .icon_img_right {
    width: 50px;
    height: 50px;
    display: block;
    padding-top: 10px;
  }
}
/*默认*/
@media (min-width: 979px) and (max-width: 1199px) {
  .icon_img_right {
    width: 40px;
    height: 40px;
    display: block;
    padding-top: 10px;
  }
}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
  .icon_img_right {
    width: 30px;
    height: 30px;
    display: block;
    padding-top: 10px;
  }
}

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) {
  .icon_img_right {
    width: 20px;
    height: 20px;
    display: block;
    padding-top: 10px;
  }
}

.model_right {
  // width: 90px;
  background: rgba(97, 255, 255, 0.1);
  border-radius: 4px;
  border-radius: 4px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // margin-bottom: 5px;
  padding: 0 10px;
  padding-bottom: 0.1rem;
}
.model_right > div {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.model_right > div:nth-child(2) {
  // width: 100%;
  height: 2.5rem;
  margin-top: 10px;
}
.model_right .name {
  height: 2.8rem;
  word-wrap: break-word;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  display: -webkit-box;
  -webkit-line-clamp: 2; // 超出多少行
  -webkit-box-orient: vertical;
}
</style>
